<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #contain{
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
    <script src="jquery/jquery-1.12.0/jquery-1.12.0.min.js"></script>
</head>
<body>
<div id="container"></div>
<div class="container"></div>
<div class="containwer"></div>
<p id="p1"></p>
<div id="contain"></div>
<button id="btn">点击测试</button>
<script>
    $(function () {
        var $music=[];
        for(var i=0;i<10;i++){
            $music.push("歌曲"+i);
        }
        $($.map($music, function (v, i) {
            return "<input type='checkbox'>"+v+"<br>"
        }).join("")).appendTo($("#container"));

        var $all=$("<button>全选</button>");
        $all.appendTo($("#container"))
        var $no=$("<button>全不选</button>");
        $no.appendTo($("#container"))
        var $fan=$("<button>反选</button>");
        $fan.appendTo($("#container"));

        $all.click(function () {
            $('input').prop("checked",true)
        });
        $no.click(function () {
            $('input').attr("checked",false)
        })
        $fan.click(function () {
            $(":checkbox").each(function (i, v) {
                v.checked=!v.checked;
            })
        })
    });
$("#btn").click(function () {
    $("#contain").hide( 1000,function () {
        alert(1)
    })
})
</script>
</body>
</html>